<template>
  <div class="i18n-string-container">
    <el-dialog
      :title="t('language.multipleLanguage')"
      width="500"
      v-model="dialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
      @close="handleOk"
    >
      <div class="locale-container">
        <el-form-item :key="k" v-for="(v,k) in locale" :label="k" :label-width="60">
          <el-input v-model="locale[k]" :placeholder="props.placeholder" :type="props.type" :rows="props.rows">
            <template #suffix> {{k}} </template>
          </el-input>
        </el-form-item>
      </div>
      <template #footer>
        <el-button type="primary" @click="handleOk">关闭</el-button>
      </template>
    </el-dialog>

    <el-row>
      <el-col :span="appStore.multipleLanguage ? 20 : 24">

        <editor v-if="locale" v-model="locale[lang]" :placeholder="props.placeholder"  :min-height="300" />

      </el-col>
      <el-col :span="4" v-if="appStore.multipleLanguage">
        <el-button type="info" plain @click="openDialog">{{t('language.multipleLanguage')}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import {useI18n} from 'vue-i18n'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const { t } = useI18n()

const props = defineProps({
  modelValue: propTypes.object.def({}),
  placeholder: propTypes.string.def(''),
  type: propTypes.string.def('text'),
  rows: propTypes.number.def(1)
})

const dialog = ref(false)
const locale = ref<any>()

const lang = ref<string>(appStore.appLanguage)

watch(() => props.modelValue,
  (newV) => {
    if(newV) {
      locale.value = newV
    }
  },
  {
    immediate: true,
    deep: true,
  }
)

// 成功回调
const handleOk = () => {
  hidePopup()
}

const hidePopup = () => {
  nextTick(() => {
    dialog.value = false
  })
}

const openDialog = () => {
  dialog.value = true
}
</script>

<style scoped>
.i18n-string-container {
  width: 100%;
}
.locale-container{
  margin: 0 20px;
}
</style>
